import React, { Component } from 'react'

import Child from './Child'

export default class Lifecycle extends Component {


  constructor() {
    super()
    // console.log("1. 挂载阶段 constructor() 方法执行")
    this.state = {
      name: "大牧",
      age: 22,
      visible: true
    }
  }

  static getDerivedStateFromProps(props, state) {
    // 该生命周期方法使用场景较少，一般state数据需要依赖props进行处理时才会使用
    // console.log("2. 挂载阶段 getDerivedStateFromProps() 方法执行")
    console.log("5. 更新阶段 getDerivedStateFromProps() 方法执行")
    console.log(props, "props")
    console.log(state, "state")
    return null
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log("6. 更新阶段shouldComponentUpdate()方法执行")
    console.log(nextProps, "下一个更新的属性")
    console.log(nextState, "下一个更新的状态数据")
    // 返回true 组件强制重新渲染；返回false组件不会重新渲染
    return true
    // 以name为例，如果数据前后没有发生变化不需要更新
    // return this.state.name !== nextState.name
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("8.更新阶段getSnapshotBeforeUpdate()方法执行")
    console.log(prevProps, "更新前props")
    console.log(prevState, "更新前state")
    return null
  }

  componentDidUpdate() {
    console.log("9. 更新阶段componentDidUpdate()方法执行")
  }

  // UNSAFE_componentWillMount() {
  //   // 该生命周期方法即将过时，新项目中尽量避免使用
  //   // 方法中的效果，可以在constructor()和componentDidMount()中替代
  //   console.log("挂载阶段 UNSAFE_componentWillMount()方法执行")
  // }

  componentDidMount() {
    // console.log("4. 挂载阶段 componentDidMount方法执行")
  }

  componentWillUnmount() {
    console.log("10. 卸载阶段 componentWillUnmount()方法执行")
  }

  render() {
    // console.log("3. 挂载阶段 render()方法执行")
    console.log("7. 更新阶段render()重新渲染组件")

    return (
      <div>
        生命周期解析组件
        <p>姓名：{this.state.name}</p>
        <p>年龄：{this.state.age}</p>
        <button onClick={this.changeName.bind(this)}>改变姓名</button>
        <hr />
        <button onClick={this.changeVisible.bind(this)}>显示/隐藏子组件</button>
        {
          this.state.visible ? <Child></Child> : ''
        }

      </div>
    )
  }

  changeName() {
    this.setState({
      name: "DAMU"
    })
  }

  changeVisible() {
    this.setState({
      visible: !this.state.visible
    })
  }
}
